import BalancePage from '@/components/BalancePage.vue'
import HomePage from '@/components/HomePage.vue'
import InstructionPage from '@/components/InstructionPage.vue'
import LoginPage from '@/components/LoginPage.vue'
import RefillBalancePage from '@/components/RefillBalancePage.vue'
import SettingsPage from '@/components/SettingsPage.vue'
import TradersListPage from '@/components/TradersListPage.vue'
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
	{
		path: '/login',
		component: LoginPage,
		meta: { requiresAuth: false },
	},
	{
		path: '/home',
		component: HomePage,
		meta: { requiresAuth: true },
	},
	{
		path: '/tradersList',
		component: TradersListPage,
		meta: { requiresAuth: true },
	},
	{
		path: '/balance',
		component: BalancePage,
		meta: { requiresAuth: true },
	},
	{
		path: '/refillBalance',
		component: RefillBalancePage,
		meta: { requiresAuth: true },
	},
	{
		path: '/settings',
		component: SettingsPage,
		meta: { requiresAuth: true },
	},
	{
		path: '/instruction',
		component: InstructionPage,
	},
]

const router = createRouter({
	routes,
	history: createWebHistory(process.env.BASE_URL),
})

router.beforeEach((to, from, next) => {
	if (to.meta.requiresAuth) {
		const role = window.localStorage.getItem('userRole')

		if (role !== 'user') {
			next('/login')
		}
		next()
	} else {
		next()
	}
})

export default router
